<template>
    <div>
        <button v-for="(item, index) in btnlist" @click="changeflag(index)" :class="item.flag ? 'color' : ''">{{ item.name
        }}</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            btnlist: [{
                id: 1,
                name: '全部',
                flag: false
            }, {
                id: 2,
                name: '已完成',
                flag: false
            }, {
                id: 3,
                name: '未完成',
                flag: false
            }]
        }
    },
    methods: {
        changeflag(index) {
            this.btnlist.map(item => item.flag = false);
            this.btnlist[index].flag = !this.btnlist[index].flag;
            let btnflag = null;
            if (index == 0) {
                btnflag = 'all';
            } else if (index == 1) {
                btnflag = 'finished';
            } else {
                btnflag = 'unfinished';
            }
            this.$emit('change', btnflag);
        }
    }
}
</script>

<style scoped>
.color {
    color: red;
}
</style>